<html>
<head>
	<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
	<meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1" />
	<link rel="stylesheet" href="../plugins/bootstrap_3.4.1/css/bootstrap.min.css" />
	<link rel="stylesheet" href="../plugins/bootstrap_table/bootstrap-table.min.css" />
	
	<script src="../js/jquery-3.2.1.js"></script>
	<script src="../plugins/bootstrap_3.4.1/js/bootstrap.min.js"></script>
	<script src="../plugins/bootstrap_table/bootstrap-table.min.js"></script>
	<script src="../plugins/bootstrap_table/locale/bootstrap-table-zh-CN.min.js"></script>
	<script src="../plugins/layer/layer.js"></script>
	<style>
		input[type=search]{
			width: 400px!important;
			height: 50px;
		}
	</style>
	<script>
		$(function (){
			$('#exampleTableEvents').bootstrapTable({
				url: "../doc/bootstrap_table.json",
				search: true,
				pagination: true,
				showRefresh: true,
				showToggle: true,
				showColumns: true,
				pageSize:30,
				pageList: [10,20,30,40,50, 100, 200, 500],
				pageNumber:1,
				striped: true,//是否显示行间隔色
				columns: [
					{field:"id",title:"单词",sortable:"true"
						,formatter: function(value,row,index) {
							var a = '<span style="color:#fa0532;font-size: 30px;font-weight: bolder">'+value+'</span>';
							return a;
						}
					},
					{field:"name",title:"翻译"
						,formatter: function(value,row,index) {
							var a = '<span style="color:#028f34;font-size: 30px">'+value+'</span>';
							return a;
						}},
				],
				formatNoMatches: function(){
					return '无符合条件的记录';
				},
				onClickRow:function(row){
					layer.msg(row.name);
				},
			});
		})
	</script>
</head>

<body>
<table id="exampleTableEvents"  data-mobile-responsive="true" data-card-view="false"></table>


</body>

</html>